<template>
	<view class="page">
		<view class="article">
			<view class="section" v-for="(item, i) in things" :key="i">
				<view class="aside">
					<view>日期：{{item.time}}</view>
					<view>备注：{{item.what}}</view>
				</view>
				<view class="icon" @click="del(i)">
					<image src="../../../static/me/del.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="btn" @click="navTo">
			+
		</view>
	</view>
</template>

<script>
		import {dateDiffer} from '../../../utils/index.js'
	export default {
		data() {
			return {
				things: []
			};
		},
		onShow() {
			this.things = JSON.parse(uni.getStorageSync(this.$store.state.userInfo.user_id + 'things') || "[]").filter(item => {
				return dateDiffer(item.time, Date.now()) >= 0
			})
		},
		onHide() {
			uni.setStorageSync(this.$store.state.userInfo.user_id + 'things', JSON.stringify(this.things))
		},
		methods: {
			del(i) {
				uni.showModal({
					title: '确定删除吗',
					success: (res) => {
						if (res.confirm) {
							this.things.splice(i, 1)
						}
					}
				})
			},
			navTo() {
				uni.navigateTo({
					url: './addMemo/addMemo'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100%;
	background-color: white;
	.article {
		.section {
			padding: 10px;
			display: flex;
			align-items: center;
			border-bottom: 4px solid #f2f2f2;
			.aside {
				flex: 1;
			}
			.icon {
				width: 40px;
				text-align: right;
				image {
					width: 22px;
					height: 22px;
				}
			}
		}
	}
	
	.btn {
		width: 34px;
		height: 34px;
		line-height: 34px;
		text-align: center;
		position: fixed;
		bottom: 40px;
		right: 10px;
		font-size: 30px;
		background-color: #1CBAB6;
		color: white;
		margin: 0;
		padding: 0;
		border-radius: 50%;
		box-shadow: 0 0 3px #999;
	}
}
</style>
